<template>
  <div class="main1">
    <div class="box">
      <div><div v-for="item in postCommentList">{{ item.comment }}</div></div>
      =============================================================
      <el-input v-model="input"></el-input>
      <el-button @click="seed()">发送</el-button>
    </div>
  </div>
</template>
<script setup>
import { onMounted,ref } from 'vue';
import { addPostCommentAPI,getPostCommentListAPI } from '../../api/community';

const postCommentList=ref()
const input=ref()
const seed=async()=>{
  let params={
    postId:1,
    commentAuthorId:1,
    commentName:"小超",
    commentAvatar:"https://web-tlias-lkc.oss-cn-beijing.aliyuncs.com/2025-11-04-11-17-16-c8e1ba2997f64831ad482d1d77c1c505.png",
    comment:input.value,
  }
  const result=await addPostCommentAPI(params)
  input.value=''
  getPostCommentList()
}
const getPostCommentList=async()=>{
  let params={
    postId:1
  }
  const result=await getPostCommentListAPI(params)
  postCommentList.value=result.data.data
  // console.log(result)
}
onMounted(()=>{
  getPostCommentList()
})
</script>

<style scoped>
.main1{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  width: 60%;
  height: 60%;
  min-width: 760px;
  position: relative;
  /* top: 50%;
  left: 50%; */
  /* transform: translate(-50%, -50%); */
  overflow: hidden;
  border-radius: 20px;
  background-color: yellowgreen;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  /* background-color: #fff; */
    box-shadow: -18px 18px 18px rgba(0, 0, 0, 0.801);
  pointer-events: none;
}
</style>